//bbs在这里是组件名，使用时使用松散命名，假设组件名为myComp使用的时候用<my-comp>
//组件就是将页面元素，写在组件内部的Vue对象
Vue.component('bbs', {
    template: `
       <div>
            <DIV>
            <IMG src="image/logo.gif">
            </DIV>
            <!--      用户信息、登录、注册        -->
            
            <DIV class="h">
            <div class="login" v-if="myinfo==null">
             您尚未　<a href="login.html">登录</a>
            &nbsp;| &nbsp; <A href="reg.html">注册</A> |
            &nbsp;| &nbsp; <A href="忘记密码.html">忘记密码</A> |
            | &nbsp; <A href="在线聊天.html">在线聊天</A> |
            </div>
             <div class="login" v-else style="display: flex;align-content: center;gap: 5px">
             欢迎{{myinfo.uname}}　
            <el-avatar size="small"
           :src="myinfo.head"
          @click.native="dialogFormVisible = true">
            </el-avatar>
             <a href="login.html">修改密码</a>
             <A href="tblUser/logout">退出</A> |
            </div>
          
            </DIV>
    <!--        将用这个组件的地方的中间代码加入-->
            <slot></slot>
            <BR/>
            <CENTER class="gray">源辰信息</CENTER>
           
    <!-- 对话框 -->
<el-dialog
      title="请选择头像"
      :visible.sync="dialogFormVisible"
      width="30%">
      
      <!-- 对话框内容 -->
        <div class="preview-box" style="margin-top: 10px;text-align: center;margin-left: -140px">
         <img :src="head" alt="" style="max-width: 100px;max-height: 100px;border: 1px solid #ccc;border-radius: 4px;">
        </div>
    <label for="">请选择头像</label>
    <div class="file-upload">
        <el-input placeholder="粘贴图片地址" v-model="head">
            <el-upload slot="append"
               action="tblUser/upload"
               :on-success="handleAvatarSuccess"
               :before-upload="beforeAvatarUpload"
               :show-file-list="false"
            name="head">
            <el-button icon="el-icon-upload2"></el-button>
            </el-upload>
        </el-input>
    (优先使用文件中的图片)
    </div>
    <img src="image/head/1.gif"/><input type="radio" name="head" value="image/head/1.gif" v-model="head">
    <img src="image/head/2.gif"/><input type="radio" name="head" value="image/head/2.gif" v-model="head">
    <img src="image/head/3.gif"/><input type="radio" name="head" value="image/head/3.gif" v-model="head">
    <img src="image/head/4.gif"/><input type="radio" name="head" value="image/head/4.gif" v-model="head">
    <img src="image/head/5.gif"/><input type="radio" name="head" value="image/head/5.gif" v-model="head">
    <BR/>
    <img src="image/head/6.gif"/><input type="radio" name="head" value="6.gif" v-model="head">
    <img src="image/head/7.gif"/><input type="radio" name="head" value="7.gif" v-model="head">
    <img src="image/head/8.gif"/><input type="radio" name="head" value="8.gif" v-model="head">
    <img src="image/head/9.gif"/><input type="radio" name="head" value="9.gif" v-model="head">
    <img src="image/head/10.gif"/><input type="radio" name="head" value="10.gif" v-model="head">
    <BR/>
    <img src="image/head/11.gif"/><input type="radio" name="head" value="11.gif" v-model="head">
    <img src="image/head/12.gif"/><input type="radio" name="head" value="12.gif" v-model="head">
    <img src="image/head/13.gif"/><input type="radio" name="head" value="13.gif" v-model="head">
    <img src="image/head/14.gif"/><input type="radio" name="head" value="14.gif" v-model="head">
    <img src="image/head/15.gif"/><input type="radio" name="head" value="15.gif" v-model="head">
    <br/>
          
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取消</el-button>
    <el-button type="primary" @click="updateHead">确定</el-button>
    </span>
    </el-dialog>
    `,
    data() {
        return {
            myinfo: null,
            dialogFormVisible: false, // 控制对话框显示的变量
            head: 'image/head/1.gif'
        };
    },
    //创建钩子函数
    created() {
        axios.get("tblUser/myinfo").then(res => {
            this.myinfo = res.data.data;
        })
    },
    methods: {
        handleAvatarSuccess(res, file) {
            //el-upload 返回的 res.data => axios res.data.data
            //res.data => webPath
            this.head = res.data;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type.startsWith('image/');
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是图片格式！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB！');
            }
            return isJPG && isLt2M;
        },
        updateHead(){
            let p=new URLSearchParams();
            p.append("head",this.head);
            axios.post("tblUser/updateHead",p).then(res=>{
                if(res.data.code==200){
                    this.$message("修改成功！");
                    this.myinfo.head=this.head;
                }else{
                    this.$message.error('修改失败，请稍后再试！');
                }
            }).finally(this.dialogFormVisible=false);
        }
    },
    //计算属性
    computed: {},
    //第一次渲染的钩子函数
    mounted() {
    },
    //第n次渲染的钩子函数
    updated() {
    },
})